<template>
	<div class="container">
		<div class="header-c">
			<div class="tab-c">
				<div class="left" :style="{'background-color': tabIndex === 0 ? '#fff' : '#F8F8F8', 'font-weight': tabIndex === 0 ? 'bold' : ''}" @click="deliveryClick">外卖配送</div>
				<div class="right" :style="{'background-color': tabIndex === 1? '#fff' : '#F8F8F8', 'font-weight': tabIndex === 1 ? 'bold' : ''}" @click="pickClick">预约堂食</div>
				<div class="right" :style="{'background-color': tabIndex === 2? '#fff' : '#F8F8F8', 'font-weight': tabIndex === 2 ? 'bold' : ''}" @click="pickHurrey">预约快餐</div>
			</div>

			<!-- //外卖-----------------------------------------------------------------------------配送 -->
			<div class="delivery" v-if="tabIndex === 0">
				<div class="address-c" @click="addressClick">
					<i class="icon mt-location-s"></i>
					<div class="addAddress" v-if="sideFood.addressWai=='' && sideFood.addressName==''&& sideFood.addressPhone=='' ">
						<span @click="addAddress">请添加收货地址</span>
					</div>
					<div class="address" v-if="sideFood">
						<span class="address-info">{{sideFood.addressWai}}{{sideFood.addressDtaild}}</span>
						<div>
							<span class="user-info">{{sideFood.addressName}}</span>
							<span class="phone">{{sideFood.addressPhone}}</span>
							<span class="phone">{{sideFood.distance}}km</span>
						</div>
					</div>
					<i class="icon mt-arrow-right-o" :style="{fontSize: 28 + 'rpx', color: '#999'}" @click="bottomShow"></i>
				</div>
				<div class="line-sp"></div>
				<div class="delivery-time">
					<img :src="bussinessImg" alt="" style="width:60rpx;height:60rpx">
					<div class="content">
						<span class="c-l">{{bussinessName}}</span>
						<span class="c-r">商家自配</span>
					</div>
					<i class="icon mt-arrow-right-o" :style="{fontSize: 28 + 'rpx', color: '#999'}"></i>
				</div>
			</div>
			<!-- 预约-------------------------------------------------------------------------------------堂食 -->
			<div class="pick" v-if="tabIndex === 1">
				<span class="title">商家地址</span>
				<span class="address">{{MerchantAddress}}</span>
				<span class="address_pnone">{{bussinessPhone}}</span>
				<div class="map">
					<span class="distance">距您{{bussinessDistance}}km</span>
					<div class="line"></div>
					<span class="btn" @click="openMap">查看地图</span>
				</div>
				<div class="time">
					<div class="l">
						<span class="l-t">到店时间</span>
						<div class="l-b">
							<input type="text" placeholder="18:00" placeholder-style="font-size:25rpx;" v-model="daodian">
							<i class="icon mt-arrow-right-o"></i>
						</div>
					</div>
					<div class="line"></div>

					<div class="r">
						<span class="r-t">预留电话</span>
						<div class="r-b">
							<span>{{userInfo.phone}}</span>
							<i class="icon mt-arrow-right-o"></i>
						</div>
					</div>
				</div>

			</div>
			<!-- 预约------------------------------------------------------------------快餐 -->
			<div class="pick" v-if="tabIndex === 2">
				<span class="title">商家地址</span>
				<span class="address">{{MerchantAddress}}</span>
				<span class="address_pnone">{{bussinessPhone}}</span>

				<div class="map">
					<span class="distance">距您{{bussinessDistance}}km</span>
					<div class="line"></div>
					<span class="btn" @click="openMap">查看地图</span>
				</div>
				<div class="time">
					<div class="l">
						<span class="l-t">自取时间</span>
						<div class="l-b">
							<input type="text" placeholder="18:00" placeholder-style="font-size:25rpx;" v-model="yuyue">
							<i class="icon mt-arrow-right-o"></i>
						</div>
					</div>
					<div class="line"></div>
					<div class="r">
						<span class="r-t">预留电话</span>
						<div class="r-b">
							<span>{{userInfo.phone}}</span>
							<i class="icon mt-arrow-right-o"></i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item-list">
			<div class="list">
				<div class="item" v-for="(item, index) in foodList" :key="index">
					<img :src="item.values.image_url">
					<div class="item-r">
						<div class="r-t">
							<span>{{item.values.name}}</span>
							<span>{{'￥'+item.values.unit_price}}</span>

						</div>
						<span>{{'x'+item.values.num}}</span>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="fold">
					<span @click="more()">{{showMore}}</span>
					<i class="icon mt-arrow-down-o"></i>
				</div>
				<div class="package-cast">
					<span></span>
				</div>
				<div class="delivery-cast">
					<span>配送费</span>
					<span v-if="tabIndex==0">{{'￥'+logfee}}</span>
					<span v-if="tabIndex==1">￥0</span>
					<span v-if="tabIndex==2">￥0</span>
				</div>
				<sep-line></sep-line>

				<div class="coupon" @click="couponClick">
					<span class="l">抵用券</span>
					<div class="r">
						<span v-if="luckName=='' ">{{luckSize}}</span>
						<div class="luck_s" v-if="luckName!='' ">
							<span v-if="luckCon==0 && luckSize!=0">全平台通用</span>
							<span v-if="luckCon==1 && luckSize!=0">限本店使用</span>
							<span class="luck_m">￥{{luckName}}</span>
						</div>

						<i class="icon mt-arrow-right-o"></i>
					</div>
				</div>
				<sep-line></sep-line>
				<div class="totle-price">
					<span class="l" v-if="reduceFee > 0">已优惠￥20</span>
					<span class="m">小计</span>
					<span class="r">￥{{totalPrice}}</span>
				</div>
			</div>
		</div>
		<div class="bottom-c">
			<div class="b-top">
				<span>支付方式</span>
				<radio-group class="radio-group" @change="radioChange">
					<label class="radio" v-for="(item,index) in payTypeList" :key="index" v-if="item.type==1">
						<radio :value="item.key" checked="true" name="wxPay" />{{item.name}}
					</label>
				</radio-group>
			</div>
			<div class="b-mid" @click="remarkClick">
				<span class="mid-l">备注</span>
				<div class="mid-r">
					<span>{{remark}}</span>
					<i class="icon mt-arrow-right-o"></i>
				</div>
			</div>
			<div class="b-btm">
				<span class="b-l">餐具数量</span>
				<div class="b-r">
					<i class="icon mt-leaf-o" :style="{color: '#00CB91', 'font-size': 38 + 'rpx'}"></i>

					<picker class="picker" mode="selector" :range="tablewareArr" :key="index+1" @change="bindPickerChange">
						<div>
							<span class="s-l">一起为环保助力</span>
							<span class="s-r">{{canjuNum}}</span>
							<i class="icon mt-arrow-right-o" :style="{color: '#999', 'font-size': 28 + 'rpx'}"></i>
						</div>
					</picker>
				</div>
			</div>
		</div>
		<div class="pay-btn" @click="payClick">
			<div class="top">
				<span class="s-l">支付订单</span>
				<span class="s-m">￥{{totalPrice}}</span>
				<span class="s-r">已优惠{{'￥'+luckName}}</span>
			</div>
		</div>
		<div class="luck_dialog" v-show="luckShow">
			<div class="mask"></div>
			<scroll-view class="scroll" :scroll-y="true">
				<div class="luck_name">
					<span>我的优惠券</span>
				</div>
				<div class="list" v-for="(item,index) in Lucklist" :key="index" @click="goUse(item)">
					<div class="list_s">
						<div class="list_container">
							<div class="list_c">
								<div class="list_name" v-if="item.range==0">全平台通用红包</div>
								<div class="list_name" v-if="item.range==1">限本餐厅使用</div>
								<div class="list_time">领取时间：{{item.validityDate}}</div>
							</div>
							<div class="list_money">
								<span class="a"></span>
								<span class="mon">{{'￥'+item.discounted}}</span>
								<div class="user_type">去使用</div>
							</div>
						</div>
						<div class="list_title">
							<span>限登录和收餐手机号{{mobile}}使用</span>
						</div>
					</div>

				</div>
				<img src="../../../static/images/cuohao.png" alt="" @click="luckHidden">
			</scroll-view>

		</div>
		<div class="footer_modal" v-show="bottom">
			<scroll-view class="scr" :scroll-y="true">
				<div class="zhezhao" @click.stop="bottom_hidde"></div>
				<div class="footer_contain">
					<div class="f_c">
						<span>取消</span>
						<span @click="clearCard">我的收货地址</span>
						<span></span>
					</div>
					<div class="seach_no" v-if="userAdress=='' ">
						<span>暂无收货地址/(ㄒoㄒ)/~~</span>
					</div>
					<div class="f_c_i" v-for="(item,index) in userAdress" :key="index" @click="selectAdress(item)" :class="item.status==0 ? 'active':''">

						<img src="../../../static/images/duihao.png" alt="" style="width:16px;height:16px;vertical-align:middle;">
						<span class="name">{{item.address}}</span>
						<span class="address_detaild">{{item.detailed}}</span>
						<div class="my_address">
							<span class="address_name">{{item.member}}</span>
							<span class="address_phone">{{item.phone}}</span>
						</div>

					</div>
					<div class="address" @click="addAddress">
						<img src="../../../static/images/jia.png" style="width:45rpx;height:45rpx;vertical-align:middle;padding-right:20rpx;" alt="">
						<span>添加收货地址</span>
					</div>
				</div>
			</scroll-view>
		</div>
	</div>
</template>

<script>
import {openLocation} from '@/utils/wxapi'

export default {
	data() {
		return {
			sideFood: {
				addressWai: '',
				addressDtaild: '',
				addressName: '',
				addressPhone: '',
				addressId: '', //会员地址Id
				distance: '',
			},
			userInfo: {
				phone: '',
			},
			wepay: true,
			foodType: '', //就餐类型
			Lucklist: '', //优惠券列表
			luckSize: '', //优惠券数量
			luckShow: false, //优惠券弹出层
			bussinessDistance: '', //商家距离
			bussinessPhone: '', //商家电话
			daodian: '', //到店时间
			remark: '暂无留言',
			logfee: '', //物流费
			id: '', //商家id
			yuyue: '', //预约取餐时间
			bussinessId: '',
			allFoods: '', //全部菜品
			showMore: '展开更多',
			luckCon: '', //优惠券品类
			luckId: '', //优惠券id
			MerchantAddress: '', //商家地址
			bussinessImg: '', //商家logo
			bussinessName: '', //商家名字
			luckName: '',
			userAdress: '', //用户地址
			payType: 4, //支付方式
			canjuNum: '', //餐具数量
			foodList: [],
			bottom: false, //底部弹框
			tabIndex: 0,
			tablewareArr: [1, 2, 3, 4, 5, 6, 7, 8],
			totalPrice: '', //总计金额
			payTypeList: '', //支付方式
			//经纬度
			latitudes: {
				weidu: '', //当前经纬度
				jingdu: '',
				lat: '', //商家经纬度
				lng: '',
			},
		}
	},
	computed: {},

	onLoad(options) {
		if (options.id != '' || options.id != undefined) {
			var id = options.id
			this.id = id
		}
		console.log('这是优惠信息', options.content, options.id)
		this.bussinessId = options.id
		this.bussinessName = options.name
		this.bussinessImg = options.img
		this.getUserAddress(id)
		this.deliveryClick()
		this.userInfo.phone = wx.getStorageSync('username')
		this.getLuckList()

		this.getPayType()
	},
	onShow() {
		if (this.$store.state.user.remark) {
			this.remark = this.$store.state.user.remark
		}
		this.bottom = false
		this.getUserAddress(this.id)
	},
	methods: {
		//去选优惠券

		goLuck() {
			wx.navigateTo({
				url: '/pages/luckList/main',
			})
		},
		//展开全部菜品
		more() {
			if (this.showMore === '展开更多') {
				var list = this.allFoods
				this.foodList = list
			}
		},

		//获取物流费
		getLogfeeprice(addressId) {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/logfeeprice',
				method: 'post',
				data: {
					restaurantId: this.id,
					addressId: addressId,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.logfee = re.data.logfee
			})
		},
		//隐藏优惠券框
		luckHidden() {
			this.luckShow = false
		},
		//获取经纬度
		getlongitude() {
			var that = this
			wx.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.latitudes.weidu = res.latitude
					that.latitudes.jingdu = res.longitude
					that.getGoodNameAddress()
				},
			})
		},
		//选择餐具数量
		bindPickerChange(e) {
			var num = Number(e.target.value)
			this.canjuNum = Number(num + 1)
		},
		//选择支付方式
		radioChange(e) {
			//1微信支付 2余额支付
			this.payType = e.target.value
			console.log(this.payType)
		},
		//获取优惠券列表
		getLuckList() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/getLuck',
				method: 'post',
				data: {
					restaurantId: this.id,
					userId: userId,
					status:0
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
				this.luckSize = re.data.size
				this.Lucklist = re.data.list
			})
		},
		//抵用券弹出
		couponClick() {
			this.luckShow = true
		},
		//备注
		remarkClick() {
			wx.navigateTo({url: '/pages/remark/main'})
		},
		//去结算
		payClick() {
			if (this.payType == '') {
				wx.showToast({
					title: '请选支付方式',
					image: '../../static/images/gantanhao.png',
				})
				return false
			}
			var userId = wx.getStorageSync('userId')
			if (this.sideFood.addressWai == '' && this.sideFood.addressName == '' && this.sideFood.addressPhone == '') {
				wx.showToast({
					title: '地址不能为空',
					image: '../../static/images/gantanhao.png',
				})
				return false
			}
			let getParams = {
				
				url: '/miniprogramOrder/createOrder',
				method: 'post',
				data: {
					restaurantId: this.id,
					userId: userId,
					type: this.foodType,
					description: this.remark,
					luckId: this.luckId,
					memberPhone: wx.getStorageSync('userPhone'),
					addressId: this.sideFood.addressId,
					tablewareNum: this.canjuNum,
					memberNum: 0,
					takeOutOrigin:2
				},
			
			}
			this.$JZWX(getParams).then(re => {
				console.log(re)
				let orderId = re.data
				if (re.status == 0) {
					if (this.payType == 4) {
						this.pay(orderId)
					}
					if (this.payType == 2) {
						this.payY(orderId)
					}
				} else {
					wx.showToast({
						title: '下单失败',
						image: '../../static/images/gantanhao.png',
					})
				}
			})
		},
		//获取支付方式
		getPayType() {
			var userId = wx.getStorageSync('userId')
			let getParams = {
				url: '/miniprogramOrder/payMethods',
				method: 'post',
				data: {
					restaurantId: this.id,
					userId: userId,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('支付方式', re)
				this.payTypeList = re.data
			})
		},
		//使用优惠券
		goUse(item) {
			this.luckName = item.discounted
			this.luckId = item.id
			this.luckCon = item.range
			this.luckShow = false
			
		},
		//去添加地址
		addAddress() {
			wx.navigateTo({
				url: '/pages/addAddress/main?type=1',
			})
		},
		//选择地址
		selectAdress(item) {
			if (item.status == 0) {
				return false
			}
			this.sideFood.addressWai = item.address
			this.sideFood.addressDtaild = item.detailed
			this.sideFood.addressName = item.member
			this.sideFood.addressPhone = item.phone
			this.sideFood.distance = item.distance
			this.sideFood.addressId = item.id
			var addressId = item.id
			this.bottom = false
			this.getLogfeeprice(addressId)
		},
		//外卖
		deliveryClick() {
			var userId = wx.getStorageSync('userId')
			this.foodType = 4
			let getParams = {
				url: '/miniprogramOrder/selectType',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					type: 4,
				},
			}
			this.$JZWX(getParams).then(re => {
				this.allFoods = re.data.foodList
				this.foodList = re.data.foodList.slice(0, 3)
				this.totalPrice = re.data.tatolPrice
			})
			this.tabIndex = 0
		},
		//堂食
		pickClick() {
			var userId = wx.getStorageSync('userId')
			this.foodType = 4
			console.log(userId)
			let getParams = {
				url: '/miniprogramOrder/selectType',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					type: 3,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('asdasdasdasdasdasd', re)
				this.allFoods = re.data.foodList
				this.foodList = re.data.foodList.slice(0, 3)
				this.totalPrice = re.data.tatolPrice
				this.getlongitude()
			})

			this.tabIndex = 1
		},
		//快餐
		pickHurrey() {
			var userId = wx.getStorageSync('userId')
			this.foodType = 5
			console.log(userId)
			let getParams = {
				url: '/miniprogramOrder/selectType',
				method: 'post',
				data: {
					restaurantId: this.bussinessId,
					userId: userId,
					type: 5,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('asdasdasdasdasdasd', re)
				this.allFoods = re.data.foodList
				this.foodList = re.data.foodList.slice(0, 3)
				this.totalPrice = re.data.tatolPrice
			})

			this.tabIndex = 1
			this.tabIndex = 2
		},
		//底部地址隐藏
		bottom_hidde() {
			this.bottom = false
		},
		openMap() {
			const latitude = Number(this.latitudes.lat)
			const longitude = Number(this.latitudes.lng)
			wx.openLocation({
				latitude,
				longitude,
				scale: 28,
			})
		},
		//地址列表弹框
		bottomShow() {
			this.bottom = true
		},
		//余额支付
		payY(orderId) {
			var userId = wx.getStorageSync('userId')
			let openId = wx.getStorageSync('openid')
			let getParams = {
				url: '/miniprogramOrder/payOrder',
				method: 'post',
				data: {
					userId: userId,
					orderId: orderId,
					payMethod: this.payType,
					openId: openId,
					password: '741852',
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('支付返回结果', re)
				if (re.status == -1) {
					console.log(re.msg)
					wx.showToast({
					title:re.msg,
					image: '../../static/images/gantanhao.png',
				})
				}
				if(re.status==0){
					wx.showToast({
					title:re.msg,
					image: '../../static/images/gantanhao.png',
				})
				}
			})
		},
		//微信支付
		pay(orderId) {
			var userId = wx.getStorageSync('userId')
			let openId = wx.getStorageSync('openid')
			let getParams = {
				url: '/miniprogramOrder/payOrder',
				method: 'post',
				data: {
					userId: userId,
					orderId: orderId,
					payMethod: this.payType,
					openId: openId,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('支付返回结果', re)
				if (this.payType == 4) {
					
				}
			})
		},
		//获取用户的收货地址
		getUserAddress(id) {
			var userId = wx.getStorageSync('userId')
			var that = this
			let getParams = {
				url: '/miniprogramOrder/userAddressListIs',
				method: 'post',
				data: {
					restaurantId: id,
					userId: userId,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('会员地址', re)
				this.userAdress = re.data
				this.sideFood.addressWai = re.data[0].address
				this.sideFood.addressDtaild = re.data[0].detailed
				this.sideFood.addressName = re.data[0].member
				this.sideFood.addressPhone = re.data[0].phone
				this.sideFood.distance = re.data[0].distance
				this.sideFood.addressId = re.data[0].id
				var addressId = re.data[0].id
				console.log('地址', this.sideFood, '地址Id', addressId)
				that.getLogfeeprice(addressId)
			})
		},
		//获取商家的地址
		getGoodNameAddress(id) {
			let getParams = {
				url: '/miniprogramOrder/getRestAddress',
				method: 'post',
				data: {
					restaurantId: this.id,
					lat: this.weidu,
					lng: this.jingdu,
				},
			}
			this.$JZWX(getParams).then(re => {
				console.log('商家的地址', re)
				this.MerchantAddress = re.data.address
				this.bussinessDistance = re.data.distance
				this.bussinessPhone = re.data.phone
				this.latitudes.lat = re.data.lat
				this.latitudes.lng = re.data.lng
				console.log('sdsdszaaaaa', this.latitudes)
			})
		},
	},

	mounted() {},
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	background-color: #f9f9f9;
	.header-c {
		display: flex;
		flex-direction: column;
		margin: 20rpx;
		background-color: white;
		.tab-c {
			display: flex;
			height: 88rpx;
			align-items: center;
			background-color: white;
			.left {
				align-items: center;
				justify-content: center;
				display: flex;
				flex: 1;
				font-size: 32rpx;
				color: $textBlack-color;
				height: 88rpx;
			}
			.right {
				@extend .left;
				background-color: $page-bgcolor;
			}
		}
		.delivery {
			display: flex;
			background-color: white;
			flex-direction: column;
			.address-c {
				display: flex;
				background-color: white;
				padding: 20rpx 0;
				i {
					font-size: 36rpx;
					margin: 20rpx;
					color: #434343;
				}
				.addAddress {
					padding-top: 12rpx;

					span {
						font-size: 25rpx;
					}
				}
				.address {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					flex: 1;
					.address-info {
						font-size: 28rpx;
						color: $textBlack-color;
					}
					.user-info {
						font-size: 24rpx;
						color: $textDarkGray-color;
						display: inline-block;
					}
					.phone {
						font-size: 24rpx;
						color: $textDarkGray-color;
						padding: 20rpx;
					}
				}
			}
			.line-sp {
				height: 2rpx;
				background-color: $spLine-color;
				flex: 1;
				margin: 0 20rpx;
			}
			.delivery-time {
				display: flex;
				align-items: center;
				background-color: white;
				padding: 0 20rpx;
				i {
					font-size: 28rpx;
					color: $textBlack-color;
				}
				.content {
					display: flex;
					align-items: center;
					flex: 1;
					margin: 20rpx;
					.c-l {
						font-size: 28rpx;
						color: #ccc;
					}
					.c-r {
						font-size: 24rpx;
						color: #5584e2;
						margin-left: 20rpx;
					}
				}
			}
		}
		.pick {
			display: flex;
			flex-direction: column;
			background-color: white;
			padding: 30rpx;
			.title {
				font-size: 28rpx;
				color: $textBlack-color;
			}
			.address {
				font-size: 36rpx;
				color: $textBlack-color;
				font-weight: bold;
				margin-top: 10rpx;
			}
			.address_pnone {
				font-size: 28rpx;
				color: $textBlack-color;
				margin-top: 10rpx;
			}
			.map {
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.distance {
					font-size: 28rpx;
					color: #000;
				}
				.line {
					width: 2rpx;
					height: 20rpx;
					background-color: $textGray-color;
					margin: 0 16rpx;
				}
				.btn {
					font-size: 28rpx;
					color: #2f84e9;
				}
			}
			.time {
				display: flex;
				align-items: center;
				border-top: 2rpx solid $spLine-color;
				border-bottom: 2rpx solid $spLine-color;
				margin: 30rpx 0;
				height: 140rpx;
				.l {
					display: flex;
					flex-direction: column;
					flex: 1;
					.l-t {
						font-size: 24rpx;
						color: $textDarkGray-color;
					}
					.l-b {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 10rpx;
						input {
							font-size: 24rpx;
							color: #000;
						}
						i {
							font-size: 28rpx;
							color: $textGray-color;
							margin-left: 10rpx;
						}
					}
				}
				.line {
					width: 2rpx;
					height: 100rpx;
					background-color: $spLine-color;
				}
				.r {
					display: flex;
					flex-direction: column;
					flex: 1;
					margin-left: 30rpx;
					.r-t {
						font-size: 24rpx;
						color: $textDarkGray-color;
					}
					.r-b {
						display: flex;
						flex-direction: row;
						align-items: center;
						margin-top: 10rpx;
						span {
							font-size: 24rpx;
							color: #000;
						}
						i {
							font-size: 28rpx;
							color: $textGray-color;
							margin-left: 10rpx;
						}
					}
				}
			}
			.protocol {
				display: flex;
				align-items: center;
				i {
					font-size: 36rpx;
					color: $theme-color;
				}
				span {
					font-size: 28rpx;
					color: $textBlack-color;
					margin-left: 30rpx;
				}
				text {
					font-size: 28rpx;
					color: #626381;
				}
			}
		}
	}
	.item-list {
		display: flex;
		flex-direction: column;
		margin: 0 20rpx;
		background-color: white;
		.section {
			display: flex;
			align-items: center;
			align-items: center;
			height: 88rpx;
			padding: 0 20rpx;
			img {
				width: 40rpx;
				height: 40rpx;
				border-radius: 20rpx;
			}
			span {
				font-size: 28rpx;
				color: $textDarkGray-color;
				flex: 1;
				margin-left: 20rpx;
			}
			text {
				color: $textBlack-color;
				font-size: 20rpx;
				padding: 3rpx 6rpx;
				border: 2rpx solid $textBlack-color;
			}
		}
		.list {
			display: flex;
			flex-direction: column;
			background-color: white;
			.item {
				display: flex;
				height: 120rpx;
				flex: 1;
				background-color: $page-bgcolor;
				margin-bottom: 10rpx;
				padding-top: 20rpx;
				img {
					width: 100rpx;
					height: 100rpx;
					margin-left: 20rpx;
				}
				.item-r {
					display: flex;
					flex: 1;
					flex-direction: column;
					margin: 0 20rpx;
					.r-t {
						display: flex;
						align-items: center;
						justify-content: space-between;
						span {
							font-size: 28rpx;
							color: $textBlack-color;
						}
					}
					span {
						font-size: 20rpx;
						color: $textDarkGray-color;
					}
				}
			}
		}
		.footer {
			display: flex;
			flex-direction: column;
			background-color: white;
			.fold {
				display: flex;
				align-self: center;
				align-items: center;
				justify-content: center;
				padding: 6rpx;
				margin-top: 26rpx;
				border: 2rpx solid $spLine-color;
				i {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
				span {
					font-size: 20rpx;
					color: $textDarkGray-color;
					margin-right: 6rpx;
				}
			}
			.package-cast {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx;
				span {
					font-size: 28rpx;
					color: $textBlack-color;
				}
			}
			.delivery-cast {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 20rpx;
				border-bottom: 2rpx solid #e4e4e4;
				span {
					font-size: 28rpx;
					color: $textBlack-color;
				}
			}

			.red-packet {
				display: flex;
				align-content: center;
				margin: 20rpx;
				justify-content: space-between;
				.l {
					font-size: 28rpx;
					color: $textBlack-color;
				}
				.r {
					display: flex;
					align-items: center;
					span {
						font-size: 24rpx;
						color: $mtRed-color;
					}
					.lick_m {
						padding-left: 10rpx;
					}
					i {
						font-size: 28rpx;
						margin-left: 10rpx;
						color: $textGray-color;
					}
				}
			}
			.coupon {
				display: flex;
				align-content: center;
				margin: 20rpx;
				justify-content: space-between;
				.l {
					font-size: 28rpx;
					color: $textBlack-color;
				}
				.r {
					display: flex;
					align-items: center;
					.luck_s {
						span {
							font-size: 24rpx;
							color: $mtRed-color;
						}
					}
					span {
						font-size: 24rpx;
						color: $mtRed-color;
					}
					i {
						font-size: 28rpx;
						margin-left: 10rpx;
						color: $textGray-color;
					}
				}
			}
			.totle-price {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin: 20rpx;
				.l {
					font-size: 24rpx;
					color: $textDarkGray-color;
				}
				.m {
					font-size: 28rpx;
					color: $textBlack-color;
					margin: 0 20rpx;
				}
				.r {
					font-size: 28rpx;
					color: $mtRed-color;
				}
			}
		}
	}
	.privacy-c {
		display: flex;
		flex-direction: column;
		height: 160rpx;
		background-color: white;
		margin: 20rpx;
		justify-content: center;
		.top {
			display: flex;
			align-items: center;
			margin: 0 20rpx;
			.t-l {
				display: flex;
				align-items: center;
				flex: 1;
				span {
					font-size: 28rpx;
					color: $textBlack-color;
					margin: 0 10rpx;
				}
			}
		}
		span {
			font-size: 20rpx;
			color: $textDarkGray-color;
			margin: 0 20rpx;
		}
	}
	.bottom-c {
		display: flex;
		background-color: white;
		margin: 20rpx;
		margin-top: 0;
		justify-content: center;
		flex-direction: column;
		margin-bottom: 186rpx;
		.b-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			margin: 0 20rpx;
			border-bottom: 2rpx solid $spLine-color;
			span {
				font-size: 28rpx;
				color: $textBlack-color;
			}
			rodio {
			}
			label {
				font-size: 25rpx;
			}
		}
		.b-mid {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			margin: 0 20rpx;
			border-bottom: 2rpx solid $spLine-color;
			.mid-l {
				font-size: 28rpx;
				color: $textBlack-color;
			}
			.mid-r {
				display: flex;
				align-items: center;
				span {
					display: inline-block;
					width: 80px;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					font-size: 28rpx;
					color: $textDarkGray-color;
					text-align: right;
				}
				i {
					font-size: 28rpx;
					color: $textGray-color;
					margin-left: 10rpx;
				}
			}
		}
		.b-btm {
			display: flex;
			background-color: white;
			margin: 20rpx;
			align-items: center;
			.b-l {
				font-size: 28rpx;
				color: $textBlack-color;
				flex: 1;
			}
			.b-r {
				display: flex;
				align-items: center;
				margin: 0 20rpx;
				margin-right: 0;
				.s-l {
					font-size: 24rpx;
					color: #00cb91;
					margin: 0 10rpx;
				}
				.picker {
					div {
						display: flex;
						align-items: center;
						.s-r {
							font-size: 28rpx;
							color: $textDarkGray-color;
							margin-right: 10rpx;
							flex: 1;
						}
					}
				}
			}
		}
	}
	.pay-btn {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 94rpx;
		background-color: #4eaa31;
		justify-content: center;
		.top {
			display: flex;
			height: 50rpx;
			align-items: center;
			margin-top: 30rpx;
			.s-l {
				font-size: 32rpx;
				color: white;
			}
			.s-m {
				font-size: 36rpx;
				color: white;
				font-weight: bold;
				margin: 0 20rpx;
			}
			.s-r {
				font-size: 24rpx;
				color: white;
			}
		}
	}
	//优惠券弹出层
	.luck_dialog {
		width: 100%;
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
			z-index: 10;
		}
		.scroll {
			width: 86%;
			height: 800rpx;
			background: #fff;
			position: fixed;
			z-index: 1000;
			// position:relative;
			top: 26%;
			margin: auto;
			left: 8%;
			top: 8%;
			// position:absolute;

			.luck_name {
				text-align: center;
				font-size: 36rpx;
				font-family: '楷体';
				line-height: 26px;
				text-align: center;
				font-size: 36rpx;
				color: #a2a2a2;
				line-height: 26px;
			}
			.list {
				width: 95%;
				margin: auto;
				background: #fff;
				height: 140rpx;
				border-radius: 20rpx;
				margin-top: 20rpx;
				background: #f3f3f3;

				.list_s {
					height: 50px;

					.list_container {
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 100%;

						.list_c {
							padding: 23rpx;
							.list_name {
								color: red;
								font-size: 30rpx;
								font-family: '楷体';
							}
							.list_time {
								font-size: 20rpx;
								color: #cccccc;
							}
						}
						.list_money {
							padding: 16rpx 0 0 10rpx;

							.a {
								font-size: 25rpx;
								color: red;
								font-size: 25rpx;
								color: red;
								padding-left: 10px;
							}
							.mon {
								font-size: 30rpx;
								color: red;
							}
							.user_type {
								font-size: 25rpx;
								padding-top: 8px;
								background: #ff6365;
								height: 40rpx;
								width: 51px;
								text-align: center;
								border-radius: 20rpx;
								line-height: 28rpx;
								margin-top: 5px;
								margin-right: 10px;
								color: #fff;
							}
						}
					}
				}
				.list_title {
					font-size: 25rpx;
					font-family: '楷体';
					span {
						padding: 20rpx;
						color: #a2a2a2;
					}
				}
			}
			img {
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				bottom: 5%;
				left: 44%;
			}
		}
	}
	.footer_modal {
		background: #fff;
		width: 100%;
		bottom: 0rpx;
		visibility: visible;
		position: fixed;

		.scr {
			height: 663rpx;
		}
		.zhezhao {
			position: fixed;
			height: 100%;
			overflow: hidden;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.7);
		}
		.footer_contain {
			position: relative;
			z-index: 500;
			background: #fff;
			height: 100%;

			.f_c {
				display: flex;
				padding: 20rpx;
				justify-content: space-between;
				align-items: center;
				font-size: 25rpx;
				font-family: '楷体';
			}
			.seach_no {
				text-align: center;
				font-size: 30rpx;
				margin-top: 30rpx;
			}
			.active {
				color: #a2a2a2;
			}
			.f_c_i {
				padding: 20rpx;
				align-items: center;
				font-size: 25rpx;
				bottom: 1px solid #e8e8e8;
				.name {
					padding: 20rpx;
					font-size: 25rpx;
				}
				.address_detaild {
					padding: 20rpx;
					font-size: 25rpx;
				}
				.my_address {
					padding: 20rpx;
					.my_address {
						font-size: 23rpx;
						color: #a2a2a2;
					}
					.address_name {
						color: #a2a2a2;
						padding-left: 27rpx;
					}
					.address_phone {
						font-size: 23rpx;
						color: #a2a2a2;
						padding: 10px;
					}
				}
			}
			.address {
				text-align: center;
				font-size: 30rpx;
				color: #a2a2a2;
				position: absolute;
				bottom: 5%;
				left: 34%;
			}
		}
	}
}
</style>
